$(function () {

    var data = location.search.slice(1).split("=");
    var proId = data[1];
    var bigPic = $(".big-pic");
    var smallPic = $(".small-pic");
    var product = {
        "id": null,
        "num": null,
        "type": null,
        "color": null,
        "m": null,
        "n": null
    };
    $.ajax({
        type: "get",
        url: "../lib/product_detail.php?id=" + proId,
        dataType: "json",
        success: function (response) {
            var j;
            var template = "",
                template1 = "",
                template2 = "";
            response.forEach((elm, i) => {
                // 获取详情页左侧展示图
                for (j = 1; j < 5; j++) {
                    var pic = "pic0" + j;
                    var picture = JSON.parse(elm[pic]);
                    template += ` <img src="..${picture.src}" alt="${picture.title}">`;
                }
                bigPic.append(template);
                smallPic.append(template);

                // 获取商品类型
                var arrType = (elm.alltype).slice(1, -1).split(",");
                for (j = 1; j < arrType.length; j++) {
                    template1 += "<a href='#'>" + arrType[j] + "</a>";
                }
                $("#product_type").append(template1);

                // 获取商品颜色
                var arrColor = (elm.allcolor).slice(1, -1).split(",");
                for (j = 0; j < arrColor.length; j++) {
                    template2 += "<a href='#'>" + arrColor[j] + "</a>";
                }
                $("#product_color").append(template2);

            });
        }
    });


    // 图片展示选项卡
    var smallpic = $(".small-pic>img");
    var bigpic = $(".big-pic>img");
    smallpic.on("click", function () {
        var ind = smallpic.index($(this));
        bigpic.eq(ind).addClass("show").siblings().removeClass("show");
    })
    // 配送城市选择
    var pro = ["北京", "上海", "江苏", "浙江", "安徽", "福建", "江西"];
    var city = {
        北京: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "海淀区", "丰台区", "石景山区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "门头沟区", "密云县", "延庆县"],
        上海: ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明县"],
        江苏: ["南京", "苏州", "无锡", "常州", "镇江", "南通", "泰州", "扬州", "盐城", "连云港", "徐州", "淮安", "宿迁"],
        浙江: ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "丽水"],
        安徽: ["合肥", "芜湖", "蚌埠", "淮南", "马鞍山", "淮北", "铜陵", "安庆", "黄山", "滁州", "阜阳", "宿州", "巢湖", "六安", "亳州", "池州", "宣城"],
        福建: ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
        江西: ["南昌", "景德镇", "萍乡", "九江", "新余", "鹰潭", "赣州", "吉安", "宜春", "抚州", "上饶"],
    };
    for (var i = 0; i < pro.length; i++) {
        $option = $("<option/>")
        $option.attr("value", pro[i]);
        $option.text(pro[i]);
        $(".transp #s1").append($option);
    }
    $(".transp #s1").click(function () {
        var cities = city[$(this).val()];
        $(this).parent().find("#s2").empty();
        for (var i = 0; i < cities.length; i++) {
            $option = $("<option/>")
            $option.attr("value", cities[i]);
            $option.text(cities[i]);
            $(this).parent().find("#s2").append($option);
        }
    });

    // 获取配送时间
    var time = new Date();
    var h = time.getHours() + 5;
    h > 24 ? h = h - 24 : h;
    $("#now").html(function (index, value) {
        return h + ":00点";
    });

    // 获取标题、详情和价格
    $.ajax({
        type: "get",
        url: "../lib/product_detail01.php?id=" + proId,
        dataType: "json",
        success: function (response) {
            response.forEach((elm, i) => {
                $("#title-h1").html(elm.title);
                $(".p1").html(elm.details);
                $(".price").html(function (index, val) {
                    return "￥" + elm.price;
                });
                $(".price>s").html(function (index, val) {
                    return "￥" + elm.oldprice;
                });
            })

        }
    });

    // 选择加购数量
    var add = $("#add");
    var reduce = $("#reduce");
    var num = $("#num");
    add.on("click", function () {
        event.preventDefault();
        num.val(function () {
            return Number(this.value) + 1;
        });
    })
    reduce.on("click", function () {
        event.preventDefault();
        num.val(function () {
            if (this.value == 1) {
                return 1;
            } else {
                return Number(this.value) - 1;
            }

        });
    })

    // 获取选中的商品类型
    var productType = $("#product_type");
    productType.on("click", "a", function () {
        event.preventDefault();
        $(this).css("borderColor", "blue").removeClass("ckType").addClass("ckType").siblings().css("borderColor", "#000").removeClass("ckType");
        var type = $(this).html();
        product.type = type;
        $("#product_type>a").each(function (i, elm) {
            if (elm.className == "ckType") {
                product.n = 1;
            }
        })
    })

    // 获取选中的商品颜色
    var productColor = $("#product_color");
    productColor.on("click", "a", function () {
        event.preventDefault();
        var color = $(this).html();
        product.color = color;
        $(this).css("borderColor", "blue").removeClass("ckColor").addClass("ckColor").siblings().css("borderColor", "#000").removeClass("ckColor");
        $("#product_color>a").each(function (i, elm) {
            if (elm.className == "ckColor") {
                product.m = 1;
            }
        })
    })

    // 加入购物车
    var addTocar = $("#add-to-car");


    addTocar.on("click", function () {
        event.preventDefault();
        if (product.m + product.n == 2) {
            var shop = cookie.get('shop'); //获取cookie
            var n = 0;
            n = num.val();
            product.id = proId;
            product.num = n;
            // console.log(product);
            if (shop) {
                console.log(shop);
                shop = JSON.parse(shop);
                shop.push(product);
                cookie.set('shop', JSON.stringify(shop), 1);
            } else {
                shop = [];
                shop.push(product);
                cookie.set('shop', JSON.stringify(shop), 1);
            }
            location.href = "../html/shopCar.html";
        } else {
            alert("请至少选择一种类型和颜色");
        }
    })

})